<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组分块演示</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        h1 {
            color: #4CAF50;
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 80%;
            max-width: 600px;
            text-align: center;
        }

        .button-container {
            margin-bottom: 20px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }

        button:hover {
            background-color: #45a049;
        }

        .input {
            padding: 8px 36px;
            border: 1px solid #e2e3e4;
            border-radius: 8px;
            display: block;
            margin: 10px auto;
            box-sizing: border-box;
            outline: none;
            width: 350px;
        }

        .textarea {
            padding: 8px;
        }

        .input:focus {
            border-color: #45a049;
        }

        .result {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .chunk {
            background-color: #f1f1f1;
            border-radius: 8px;
            padding: 15px;
            width: 45%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 1.1rem;
            text-align: center;
        }

        .chunk span {
            display: block;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <h1>数组分块演示</h1>
    <div class="container">
        <textarea class="textarea input" placeholder="请输入要分组的数组" id="textarea"></textarea>
        <input type="number" class="input" placeholder="请输入要分块大小" id="input" />
        <div class="button-container">
            <button onclick="generateChunks()">生成并显示分块</button>
        </div>
        <div class="result" id="chunk-result">
            <!-- 分块结果会显示在这里 -->
        </div>
    </div>

    <script>
        const autoTextArea = (el, extra, maxHeight) => {
            extra = extra || 0;
            var textOrtextArea = el.tagName.toLowerCase();
            //如果不是单行输入文本框或者多行输入文本框，就不执行后续操作
            if (textOrtextArea.indexOf('text') === -1 || textOrtextArea.indexOf('textarea') === -1) return;
            var isFireFox = document.getBoxObjectFor || 'mozInnerScreenX' in window,//是否火狐浏览器
                isOpera = window.opera && window.opera.toString().indexOf('opera');//是否opera浏览器
            //添加事件主流浏览器与IE浏览器的事件
            var addEvent = function (eventName, callback) {
                el.addEventListener ? el.addEventListener(eventName, callback, false) : el.attachEvent('on' + eventName, callback);
            }
            // 获取元素的属性值。参数css属性名，如height
            var getStyle = el.currentStyle ? function (prop) {
                var propName = el.currentStyle[prop];
                if (propName.indexOf('height') > -1 && propName.search(/px/i) > -1) {
                    var rect = el.getBoundingClientRect;//获取dom元素边框的所有位置属性
                    //元素边框底部位置减去顶部边框位置减去上下内边距，就是获取到的元素的实际高度(IE标准盒子模型)
                    return rect.bottom - rect.top - parseInt(getStyle('padding-bottom')) - parseInt(getStyle('padding-top')) + 'px';
                }
            } : function (prop) {
                // 主流浏览器通过getComputedStyle()即可返回元素实际属性值,只返回高度
                return window.getComputedStyle(el, null)[prop];
            };
            //设置resize属性
            el.style.resize = 'none';
            //输入框的最小高度
            var minHeight = parseInt(getStyle('height'));
            // 实际内容被改变
            var contentHeightChange = function () {
                // 默认内边距为0，元素滚动距离顶部的距离，设置元素的样式
                var padding = 0,
                    style = el.style,
                    currentHeight;
                //如果不是火狐浏览器也不是opera浏览器，则内边距等于上下边距相加
                if (!isFireFox && !isOpera) {
                    padding = parseInt(getStyle('padding-bottom')) + parseInt(getStyle('padding-top'));
                }
                //文本框初始高度就为最小高度
                style.height = minHeight + 'px';
                //如果滚动高度大于了最小高度
                if (el.scrollHeight > minHeight) {
                    //如果最大高度存在，且滚动高度大于最大高度
                    if (maxHeight && el.scrollHeight > maxHeight) {
                        //当前高度为最大高度减去内边距
                        currentHeight = maxHeight - padding;
                        style.overflowY = 'auto';
                    } else {
                        //当前高度等于滚动高度减去内边距
                        currentHeight = el.scrollHeight - padding;
                        style.overflowY = 'hidden';
                    }
                    //元素高度就等于当前高度加上光标与元素之间的距离
                    style.height = currentHeight + extra + 'px';
                }
            }
            addEvent('propertychange', contentHeightChange)
            addEvent('focus', contentHeightChange);
            addEvent('input', contentHeightChange);
            contentHeightChange();
        }
        // chunk函数
        const chunk = (arr, size) =>
            Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
                arr.slice(i * size, i * size + size)
            );

        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
        const chunkSize = 4;

        const textarea = document.getElementById('textarea');
        const input = document.getElementById('input');
        textarea.value = JSON.stringify(arr, null, 2);
        autoTextArea(textarea, 20);
        input.value = `${chunkSize}`;
        // 用于显示分块结果的函数
        function generateChunks() {
            // 原始数组和分块大小
            let parseArr = [], parseSize = +input.value || 2;
            try {
                parseArr = JSON.parse(textarea.value);
            } catch (error) {

            }
            // 获取分块后的结果
            const chunks = chunk(parseArr, parseSize);

            // 获取显示区域
            const chunkResultContainer = document.getElementById('chunk-result');

            // 清空之前的结果
            chunkResultContainer.innerHTML = '';

            // 遍历并显示每一块
            chunks.forEach((chunkItem, index) => {
                const chunkDiv = document.createElement('div');
                chunkDiv.classList.add('chunk');
                chunkDiv.innerHTML = `<strong>分块 ${index + 1}：</strong><br><span>${chunkItem.join(', ')}</span>`;
                chunkResultContainer.appendChild(chunkDiv);
            });
        }
    </script>
</body>

</html>